<template>
  <div style="overflow-x: hidden;">
    <el-container v-if="show" class="background-image">
      <div class="container">
        <h1 style="font-size: 5rem; color: #fff; font-family: Ubuntu-Bt;" class="center-text glitch"
          data-text="星野のblog">星野のblog</h1>
        <div class="header-info no-select">
          <p class="flex-child-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.19em" height="1em"
              viewBox="0 0 1664 1408" data-icon="fa:quote-left" class="iconify iconify--fa">
              <path fill="currentColor"
                d="M768 832v384q0 80-56 136t-136 56H192q-80 0-136-56T0 1216V512q0-104 40.5-198.5T150 150T313.5 40.5T512 0h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136m896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136V512q0-104 40.5-198.5T1046 150t163.5-109.5T1408 0h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136">
              </path>
            </svg>
            <span class="desc">{{superUser.introduction}}</span>
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.19em" height="1em"
              viewBox="0 0 1664 1408" data-icon="fa:quote-right" class="iconify iconify--fa">
              <path fill="currentColor"
                d="M768 192v704q0 104-40.5 198.5T618 1258t-163.5 109.5T256 1408h-64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h64q106 0 181-75t75-181v-32q0-40-28-68t-68-28H192q-80 0-136-56T0 576V192q0-80 56-136T192 0h384q80 0 136 56t56 136m896 0v704q0 104-40.5 198.5T1514 1258t-163.5 109.5T1152 1408h-64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h64q106 0 181-75t75-181v-32q0-40-28-68t-68-28h-224q-80 0-136-56t-56-136V192q0-80 56-136t136-56h384q80 0 136 56t56 136">
              </path>
            </svg>
          </p>
          <div class="top-social">
            <ul>
              <li id="bg-prev">
                <img class="flipx" src="https://lixingyong.com/themes/theme-sakura/assets/images/next-b.svg" alt="prev"
                  width="28" height="28">
              </li>
              <li>
                <a target="_blank" aria-label="access the webmaster's social media networks">
                  <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/qq.png" alt="sns" width="28"
                    height="28">
                </a>
              </li>
              <li>
                <a target="_blank" aria-label="access the webmaster's social media networks">
                  <img src="	https://lixingyong.com/themes/theme-sakura/assets/images/sns/github.png" alt="sns"
                    width="28" height="28">
                </a>
              </li>
              <li>
                <a href="https://space.bilibili.com/287035223" target="_blank"
                  aria-label="access the webmaster's social media networks">
                  <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/bilibili.png" alt="sns"
                    width="28" height="28">
                </a>
              </li>
              <li>
                <a href="https://music.163.com/#/user/home?id=1437990779" target="_blank"
                  aria-label="access the webmaster's social media networks">
                  <img src="	https://lixingyong.com/themes/theme-sakura/assets/images/sns/wangyiyun.png" alt="sns"
                    width="28" height="28">
                </a>
              </li>
              <li>
                <a target="_blank" aria-label="access the webmaster's social media networks">
                  <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/csdn.png" alt="sns" width="28"
                    height="28">
                </a>
              </li>
              <li>
                <a target="_blank" aria-label="access the webmaster's social media networks">
                  <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/zhihu.png" alt="sns" width="28"
                    height="28">
                </a>
              </li>
              <li id="bg-next">
                <img src="https://lixingyong.com/themes/theme-sakura/assets/images/next-b.svg" alt="next" width="28"
                  height="28">
              </li>
            </ul>
          </div>
        </div>
        <div style="position: relative;">
          <i class="el-icon-arrow-down bounce-animation" @click="scrollToElement"
            style="font-size: 3rem; color: white; cursor:pointer; font-weight: bold; top: 150px; right: -15px;  position: absolute; "></i>
        </div>

        <!--      <div :class="{width:isMobile}"
         style="width:40%;  display: flex; background-color: rgba(120, 130, 137, .8); opacity: 0.;justify-content: center; border-radius: 40px;">
         <span style="display: flex; align-items: center; justify-content: center; color: #eb94cf;   font-size: 18px;">
          
         </span>
       </div> -->
      </div>


      <el-footer style="display: flex; ; align-items: center;justify-content: center;">
        <div class="wave" style=" margin-bottom: -30px;">
          <div style="position: relative;">
            <WaveView class="custom-position" />
          </div>
        </div>
      </el-footer>

    </el-container>
    <div style="background-color: aliceblue; display: flex; justify-content: center;" id="element">

      <el-card :class="{ card: isMobile }"
        style="height: auto; width:70%;margin-top: 30px; margin-bottom: 10px; box-shadow: 3px 5px 1px  rgba(120, 130, 137, .3) ">
        <div slot="header" style="height: 30px;display: flex; align-items: center;justify-content: center;">
          <div
            style="width: 90%; height: 95%; border:1px dashed darkgray; border-radius: 50px; font-weight: 700; align-items: center; justify-content: center; display: flex;">
            <i class="el-icon-message-solid" style="margin-right: 10px;"></i>{{ notice }}
          </div>
        </div>
        <el-divider content-position="left"><i class="el-icon-s-claim" style="margin-right: 5px;"></i>推荐</el-divider>
        <div class="block">
          <el-carousel trigger="click" height="250px" style="border-radius: 10px; margin: 0 20px;">
            <el-carousel-item v-for="(novel,index) in novels" :key="index">
              <div
                style="width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center;">
                <img :src=novel.image alt="qwq" style="position: absolute; width: 100%;height: 100%; object-fit:cover;">
                <div
                  style="display: flex; position: absolute; justify-content: center;align-items: center; flex-wrap: wrap; ">
                  <div
                    style="display: flex; align-items: center;justify-content: center; width: 100%; font-size: 30px; margin-bottom: 7px; color:aliceblue;"
                    v-html="novel.title"></div>
                  <div
                    style="display: flex; align-items: center;justify-content: center; width: 100%; font-size: 15px; font-weight: 600; margin-bottom: 7px; color:aliceblue;">
                    {{ novel.time }}</div>
                  <div class="textContainer" > {{ novel.content.replace(/^(#+\s*)/gm, '') }}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-divider content-position="left"><i class="el-icon-zhuye-" style="margin-right: 5px;"></i>文章</el-divider>
        <div v-if="!isMobile">
          <article class="post post-list-thumb" itemscope="" itemtype="http://schema.org/Article" v-for="novel in novels" :key="novel.id">

    <div class="post-content-wrap">
      <div class="post-date flex-child-center">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:clock-circle-linear" class="iconify iconify--solar"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l2.5 2.5"></path></g></svg>
        <time class="publish-time" data-i18n="postlist.time" i18n-options="{&quot;clone&quot;:{},&quot;time&quot;:&quot;2024-08-26T02:23:35.575511923Z&quot;,&quot;params&quot;:{&quot;separator&quot;:&quot;-&quot;}}" datetime="2024-08-26T02:23:35.575511923Z" itemprop="dateCreated datePublished">发布于 {{novel.time}}</time>
        
      </div>
      <a data-pjax="" @click="$router.push({ path: '/novel', query:{novel:JSON.stringify(novel) } })" class="post-title" aria-label="viewing the article details" data-pjax-state="">
        <h1 style="cursor: pointer;">{{novel.title}}</h1>
      </a>
      <div class="post-meta">
        <span class="flex-child-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:eye-linear" class="iconify iconify--solar"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path><path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path></g></svg>
          <span data-i18n="postlist.heat" i18n-options="{&quot;clone&quot;:{},&quot;visit&quot;:&quot;269&quot;}">269 热度</span>
        </span>
        <span class="comments-number flex-child-center">
          
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:chat-line-line-duotone" class="iconify iconify--solar"><g fill="none"><path fill="currentColor" d="m13.087 21.388l.645.382zm.542-.916l-.646-.382zm-3.258 0l-.645.382zm.542.916l.646-.382zm-8.532-5.475l.693-.287zm5.409 3.078l-.013.75zm-2.703-.372l-.287.693zm16.532-2.706l.693.287zm-5.409 3.078l-.012-.75zm2.703-.372l.287.693zm.7-15.882l-.392.64zm1.65 1.65l.64-.391zM4.388 2.738l-.392-.64zm-1.651 1.65l-.64-.391zM9.403 19.21l.377-.649zm4.33 2.56l.541-.916l-1.29-.764l-.543.916zm-4.007-.916l.542.916l1.29-.764l-.541-.916zm2.715.152a.52.52 0 0 1-.882 0l-1.291.764c.773 1.307 2.69 1.307 3.464 0zM10.5 2.75h3v-1.5h-3zm10.75 7.75v1h1.5v-1zm-18.5 1v-1h-1.5v1zm-1.5 0c0 1.155 0 2.058.05 2.787c.05.735.153 1.347.388 1.913l1.386-.574c-.147-.352-.233-.782-.278-1.441c-.046-.666-.046-1.51-.046-2.685zm6.553 6.742c-1.256-.022-1.914-.102-2.43-.316L4.8 19.313c.805.334 1.721.408 2.977.43zM1.688 16.2A5.75 5.75 0 0 0 4.8 19.312l.574-1.386a4.25 4.25 0 0 1-2.3-2.3zm19.562-4.7c0 1.175 0 2.019-.046 2.685c-.045.659-.131 1.089-.277 1.441l1.385.574c.235-.566.338-1.178.389-1.913c.05-.729.049-1.632.049-2.787zm-5.027 8.241c1.256-.021 2.172-.095 2.977-.429l-.574-1.386c-.515.214-1.173.294-2.428.316zm4.704-4.115a4.25 4.25 0 0 1-2.3 2.3l.573 1.386a5.75 5.75 0 0 0 3.112-3.112zM13.5 2.75c1.651 0 2.837 0 3.762.089c.914.087 1.495.253 1.959.537l.783-1.279c-.739-.452-1.577-.654-2.6-.752c-1.012-.096-2.282-.095-3.904-.095zm9.25 7.75c0-1.622 0-2.891-.096-3.904c-.097-1.023-.299-1.862-.751-2.6l-1.28.783c.285.464.451 1.045.538 1.96c.088.924.089 2.11.089 3.761zm-3.53-7.124a4.25 4.25 0 0 1 1.404 1.403l1.279-.783a5.75 5.75 0 0 0-1.899-1.899zM10.5 1.25c-1.622 0-2.891 0-3.904.095c-1.023.098-1.862.3-2.6.752l.783 1.28c.464-.285 1.045-.451 1.96-.538c.924-.088 2.11-.089 3.761-.089zM2.75 10.5c0-1.651 0-2.837.089-3.762c.087-.914.253-1.495.537-1.959l-1.279-.783c-.452.738-.654 1.577-.752 2.6C1.25 7.61 1.25 8.878 1.25 10.5zm1.246-8.403a5.75 5.75 0 0 0-1.899 1.899l1.28.783a4.25 4.25 0 0 1 1.402-1.403zm7.02 17.993c-.202-.343-.38-.646-.554-.884a2.2 2.2 0 0 0-.682-.645l-.754 1.297c.047.028.112.078.224.232c.121.166.258.396.476.764zm-3.24-.349c.44.008.718.014.93.037c.198.022.275.054.32.08l.754-1.297a2.2 2.2 0 0 0-.909-.274c-.298-.033-.657-.038-1.069-.045zm6.498 1.113c.218-.367.355-.598.476-.764c.112-.154.177-.204.224-.232l-.754-1.297c-.29.17-.5.395-.682.645c-.173.238-.352.54-.555.884zm1.924-2.612c-.412.007-.771.012-1.069.045c-.311.035-.616.104-.909.274l.754 1.297c.045-.026.122-.058.32-.08c.212-.023.49-.03.93-.037z"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M8 9h8m-8 3.5h5.5" opacity=".5"></path></g></svg>
            <span data-i18n="postlist.comments" i18n-options="{&quot;clone&quot;:{},&quot;comment&quot;:&quot;0&quot;}">{{novel.comments}}条评论</span>
          
        </span>
        
          <span class="flex-child-center">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:folder-with-files-outline" class="iconify iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M6.86 1.25h.127c.351 0 .577 0 .798.02a4.75 4.75 0 0 1 2.474.98h6.299c.409 0 .687 0 .931.032a3.75 3.75 0 0 1 3.248 3.427a3 3 0 0 1 .77.503q.15.133.281.28c.529.588.754 1.303.86 2.144c.102.812.102 1.838.102 3.111v2.31c0 1.837 0 3.293-.153 4.432c-.158 1.172-.49 2.121-1.238 2.87c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153H9.944c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433V6.86c0-.797 0-1.303.082-1.74A4.75 4.75 0 0 1 5.12 1.331c.438-.082.944-.082 1.74-.082m12.287 4.078a2.25 2.25 0 0 0-1.853-1.559c-.134-.017-.306-.019-.794-.019h-4.689c.643.64.935.906 1.266 1.09q.328.182.689.286c.413.117.866.124 2.062.124h.425c1.162 0 2.119 0 2.894.078M6.95 2.75c-.917 0-1.271.003-1.553.056a3.25 3.25 0 0 0-2.59 2.591c-.054.282-.057.636-.057 1.553V14c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h4c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812s.677-1.003.812-2.009c.138-1.027.14-2.382.14-4.289v-2.202c0-1.336-.001-2.267-.09-2.975c-.087-.689-.246-1.06-.487-1.328a2 2 0 0 0-.168-.168c-.268-.241-.64-.4-1.328-.487c-.707-.089-1.639-.09-2.975-.09h-.484c-1.048 0-1.724 0-2.363-.182c-.35-.1-.689-.24-1.008-.417c-.58-.324-1.058-.801-1.8-1.543l-.077-.078l-.55-.55a8 8 0 0 0-.503-.482a3.25 3.25 0 0 0-1.771-.734a8 8 0 0 0-.696-.014m5.3 7.25a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
            <a data-pjax=""  aria-label="viewing the first category the article belongs to" data-pjax-state="">{{novel.type}}</a>
          </span>
        
      </div>
      <div class="float-content">
        <p >
         {{ novel.content.replace(/^(#+\s*)/gm, '')}}
        </p>
        <div class="post-bottom">
          <a data-pjax="" style="cursor: pointer;"  @click="$router.push({ path: '/novel', query:{novel:JSON.stringify(novel) } })" class="button-normal flex-child-center" aria-label="viewing the article details" data-pjax-state="">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="akar-icons:more-horizontal-fill" class="iconify iconify--akar-icons"><path fill="currentColor" fill-rule="evenodd" d="M2 12a2 2 0 1 1 4 0a2 2 0 0 1-4 0Zm8 0a2 2 0 1 1 4 0a2 2 0 0 1-4 0Zm8 0a2 2 0 1 1 4 0a2 2 0 0 1-4 0Z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>

    <div class="post-thumb">
      <a data-pjax="" @click="$router.push({ path: '/novel', query:{novel:JSON.stringify(novel) } })" alt="Halo 主题 PJAX 开发实践" aria-label="viewing the article details" class="a" data-pjax-state="">
        
        <img :src="novel.image" data-sizes="auto" class="blur-up lazyautosizes lazyloaded" alt="thumbnail of the cover of the post" width="430" height="300" onerror="imgError(this)" sizes="429px" >
        
      </a>
    </div>
  </article>
        </div>
        <div v-if="isMobile">
          <el-card style="margin: 20px 40px; max-height: 250px; border-radius: 10px;" v-for="(novel,index) in novels"
            :key="index">
            <img :src=novel.image alt="qwq"
              style="width: 100%; height: 150px; object-fit: cover;  transition: transform 0.3s ease;  " class="scale"
              @click="$router.push({ path: '/novel', query:{novel:JSON.stringify(novel) } })">
            <div style="padding: 14px;">
              <div
                style="display: flex; align-items: center;justify-content: center; width: 100%; font-size: 30px; margin-bottom: 7px;color: gray; transition: font-size 0.1s ease-in-out;"
                v-html="novel.title" class="title"
                @click="$router.push({ path: '/novel', query:{novel:JSON.stringify(novel) } })"></div>
              <div
                style="display: flex; align-items: center;justify-content: center; width: 100%; font-size: 15px; font-weight: 600; margin-bottom: 7px;color: gray; ">
                {{ novel.time }}</div>
            </div>
          </el-card>
        </div>
      </el-card>
      <div style="margin-top: 30px; margin-left: 70px; width: 20%;" v-if="!isMobile">
        <el-card
          style="width: 100%; display: flex; justify-content: center; align-items: center; position:relative ; border: 100px;">
          <img src="@/assets/img/3.png" alt="" style="width: 100% ; height:230px; object-fit: cover;">
          <div class="container" style="position: absolute; top: -80px; left: 0;">
            <div class="circle"></div>
            <img :src=superUser.image alt="qwq" class="image">
          </div>
          <div
            style="position: absolute; top: 43%; left: 50%; transform: translate(-50%,-43%); color: #fff; font-weight: bold;">
            {{superUser.name}}</div>
          <div
            style="position: absolute; top: 42%; left: 50%; transform: translate(-50%,42%); color:aliceblue; width: 100%; text-align: center;">
            {{ superUser.introduction }}</div>
          <div style="padding: 14px;">

            <div style="display: flex; justify-content: space-between; align-items: center; width:100%;">
              <div style="flex: 1; text-align: center; padding: 0,10px; border-right:2px dashed grey;">文章数:{{ novelNum }}</div>
              <div style="flex: 1; text-align: center; padding: 0,10px; border-right:2px dashed grey;">留言数:{{messageNum}}</div>
              <div style="flex: 1; text-align: center; padding: 0,10px;">相册数:{{ photoNum }}</div>
            </div>
            <div class="bottom clearfix">
              <div style="display: flex; gap: 10px; margin-top: 10px;">
                <a href="https://space.bilibili.com/287035223" target="_blank"
                  aria-label="access the webmaster's social media networks">
                  <img src="https://lixingyong.com/themes/theme-sakura/assets/images/sns/bilibili.png" alt="sns"
                    width="28" height="28">
                </a>
                <a href="https://music.163.com/#/user/home?id=1437990779" target="_blank"
                  aria-label="access the webmaster's social media networks">
                  <img src="	https://lixingyong.com/themes/theme-sakura/assets/images/sns/wangyiyun.png" alt="sns"
                    width="28" height="28">
                </a>
              </div>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 50px;">
          <div slot="header" style="display: flex; align-items: center; justify-content: center;"><i
              class="el-icon-message-solid" style="margin-right: 5 px;"></i>公告<i class="el-icon-arrow-right"
              style="margin-left: auto;"></i></div>
          <div
            style="height: 150px; font-weight: 500;  font-size: larger; align-items: center; justify-content: center; display: flex;">
            {{ notice }}</div>
        </el-card>

        <el-card style="margin-top: 50px;">
          <div slot="header" style="display: flex; align-items: center; justify-content: center;"><i
              class="el-icon-time" style="margin-right: 7px;"></i>时钟</div>
          <div style="height: 200px; display: flex; align-items: center;justify-content: center;">
            <TimeClock></TimeClock>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

/* $m.innerHTML = marked.parse($t.value); */
import TimeClock from '@/components/TimeClock.vue';
import WaveView from '@/components/WaveView.vue';




export default{
  components: {
    TimeClock,
    WaveView
  },
  data(){
    return {
      novelNum:'',
      messageNum:'',
      photoNum:'',
      showIcon: true,
      user: {},
      content:'',
      show:false,
      notice:'',
      superUser:{},
      form: {
        name: '',
        password: '',
      },
      image: '',
      person: JSON.parse(localStorage.getItem('user' || '{}')),
      dialogVisible: false,
      novels: [],
      isMobile: false,
     rules:{
        username:[
          {required:true,message:'请输入账号',trigger:'blur'} ,
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'} ,
        ]
       }
    }
  },
  computed: {
 
  },
  updated(){
    document.querySelectorAll('.post').forEach((novel,index)=>{
      if((index+1)%2==0){
        novel.style. flexDirection= 'row-reverse';
        novel.querySelector('.post-content-wrap').style.textAlign= 'right';
        novel.querySelector('.a').style.borderRadius= '10px 0 0 10px'

      }
    })
  },
  mounted(){
    this.checkScreenSize();
    window.addEventListener("resize", this.checkScreenSize);
    this.$request.get('/user/super').then(res => {
      this.superUser = res.data
    }),
    this.$request.get('/photo/totalPhoto').then(res => {
      this.photoNum = res.data
    }),
    this.$request.get('/message/total').then(res => {
      this.messageNum = res.data
    }),
    this.$request.get('/novel/total').then(res => {
      this.novelNum = res.data
    }),

     this.$request.get('/novel/select/recommend', {
      params: {
        pageNum:1,
        pageSize:4
      }
    }).then(res => {
      this.novels=res.data.records
    }),
    this.$request.get('/notice/select/recommend', {
      params: {
        pageNum:1,
        pageSize:3,
      }
    }).then(res => {
      this.notice=res.data.records[0].content
    })
    this.show=true
  },

  
  beforeDestroy() {
    window.removeEventListener("resize", this.checkScreenSize);
  },
  methods:{
    checkScreenSize() {
      this.isMobile = window.innerWidth <= 768;
    },
    scrollToElement() {
      this.$scrollTo('#element', {
        duration: 1000,
        easing: 'ease',
        offset: 0// 偏移量可以根据需要调整
      })
    },

    handleLogin(){
      this.dialogVisible=true
    },
    login() {
      this.$refs['loginRef'].validate((valid) => {
        if (valid) {
          this.$request.post('/login', this.user).then(res => {
            if(res.code=='1'){
              localStorage.setItem('user',JSON.stringify(res.data))
                location.reload();
                this.$message.success('登陆成功')
                this.dialogVisible=false
              }
            else{
              this.$message.error(res.msg)
            }
          })

        }

      })

    },

    handleForgetPass() {
      this.form = {}
      this.dialogVisible = true
    },

    exit(){
      localStorage.removeItem('user'),
      location.reload();
      this.$message.success("退出成功")
    },
    errorHandler() {
      return true
  },
  }
}

</script>
<style scoped>
.post-list-thumb-right {
    flex-direction: row-reverse;
}

.image-container img {
  width: 100%; /* 确保图片不会超出容器宽度 */
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.image-container img:hover {
  
  transform: scale(1.2)
}
.scale:hover{
  transform: scale(1.2);
}
  .background-image {
    background-image: url('@/assets/img/4.png');
    /* 其他样式，比如确保背景图覆盖整个元素 */
    height: 100vh; /* 视口高度 */
    background-size: cover; /* 覆盖整个元素 */
    background-position: center; /* 居中显示 */
    animation: header 1s ease ;
    position: relative;
  }
  .background-image::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-attachment: fixed;
    background: none;
    background: url(https://lixingyong.com/themes/theme-sakura/assets/images/themes/grid.png)
  }
    body {
    margin: 0;
    overflow-x: hidden;
}
 
.post-list-thumb .post-title {
    color: #504e4e;
}

.float-content .iconify {
    font-size: 1.875em;
    color: #666;
    margin-right: 5px;
}

 .iconify:hover {
    color: orange;
}

.custom-position {
 
  position: absolute !important;
  width: 100% !important; 
  top: -85px !important;/* 或者你想要的宽度 */
  /* 其他样式 */
  left: -1000px !important;

}

/* 定义动画 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* 向上移动20px */
  }
}

/* 应用动画到类 */
.bounce-animation {
  animation: bounce 1s infinite alternate ease-in-out; /* 无限循环的动画 */
}
.container{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  transition: .4s ease all;
  z-index: 2;
  
}
.circle{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 73px;
  border-radius: 50%;
  border: 1px solid red;
  background-image:linear-gradient(0deg,
  rgb(47,102,225),
  rgb(153,64,225)30%,
  rgb(238,55,255)60%,
  rgb(255,0,76)100%);
  animation: rotate 1s linear infinite;
}

.circle::before{
content: "";
position: absolute;
width: 30px;
height: 70px;
border-radius: 50%;
background-image:linear-gradient(0deg,
  rgb(47,102,225),
  rgb(153,64,225)30%,
  rgb(238,55,255)60%,
  rgb(255,0,76)100%);
  filter: blur(35px);

}
.circle::after{
content: "";
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background : #000;

}
.card{
  width: 100% !important;
}
.glitch {
    position: relative;
    color: #fff;
    mix-blend-mode: lighten;
    overflow: hidden;
    white-space: nowrap;
}

.center-text {
    margin: 0;
    font-family: Ubuntu, sans-serif;
    font-size: 5rem;
    transition: background 1s;
}

.post-list-thumb:hover img {
    transform: scale(1.1);
}

.title:hover{
  color: aqua !important;
  font-size :35px !important; 
  cursor: pointer;
}
.glitch:before {
    left: -1px;
    text-shadow: 1px 0 #ff3b00;
}


.glitch:after {
    left: 1px ; 
    text-shadow: -1px 0 #00a1d6;
}

.glitch:hover::after{
  text-shadow: -5px 0 #00a1d6;
  animation: clip2 .8s infinite ease-in-out alternate-reverse;
}

.glitch:hover::before{
  text-shadow: 4px 0 #ff3b00; 
  animation: clip1 .8s infinite ease-in-out alternate-reverse;
}



.glitch:before, .glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    clip:rect(0,0,0,0);
    
}
*:before, *:after {
    box-sizing: inherit;
}

.el-card__body{
  padding: 0px !important;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}


.width{
  width: 90% !important; 
}

.image {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
}

.image-container {
  overflow: hidden; 
  justify-content: center;
  align-items: center;
}

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  } 
  100%{
    transform: rotate(360deg);
  }
  
}
@keyframes clip1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }

  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }

  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }

  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }

  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }

}
@keyframes clip2{
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
}
25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
}
50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
}
75% {
    top: 0;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
}
100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
}
}

@keyframes header{
  0%{
    opacity: 0;
    transform: translateY(-50px);
  } 
  100%{
    opacity: 1;
    transform: translateY(0);
  }
  
}
      .textContainer { /* 限制容器宽度 */ /* 设置为WebKit内核的弹性盒子模型 */
        width: 500px; /* 限制容器宽度 */
      display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
      -webkit-box-orient: vertical;
      -webkit-box-pack :center!important;
      -webkit-box-align: center !important; /* 垂直排列 */
      -webkit-line-clamp: 2; /* 限制显示三行 */
      overflow: hidden; /* 隐藏超出范围的内容 */
      text-overflow: ellipsis; /* 使用省略号 */
      color: white;
    }
    .header-info {
    max-width: 30%;
    position: relative;
    margin: 0;
    font-size: 1rem;
    color: #eaeadf;
    background: rgba(0, 0, 0, .5);
    padding: 1rem;
    letter-spacing: 0;
    line-height: 2rem;
    border-radius: 10px;
    box-sizing: initial;
    white-space: nowrap;
    margin-top: 1.25rem;
}
.header-info p {
    margin: 0;
    font-family: "Ubuntu-Bt";
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    transition: color .4s;
}
.flex-child-center {
    display: inline-flex;
    align-items: center;
    gap: .375em;
}
.top-social {
    display: flex;
    justify-content: center;
    height: 1.625rem;
    margin-top: 1rem;
    list-style: none;
}
.top-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.top-social ul li {
    float: left;
    margin-right: 10px;
}

.top-social .flipx {
    transform: scaleX(-1);
    filter: FlipH;
}
.top-social img {
    height: 1.75rem;
    width: 1.75rem;
    padding: 0;
    background: 0 0;
}
.focusinfo img {
    width: 8.125rem;
    height: 8.125rem;
    padding: 2px;
    border-radius: 100%;
}
.glitch+.header-info:before {
    top: -1.875rem;
    content: "";
}
.header-info:before {
    position: absolute;
    left: 30%;
    border-width: 15px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #00000080;
}
.header-info .desc {
    white-space: normal;
    text-overflow: clip;
    word-break: keep-all;
    display: inline;
}

@media (max-width: 768px) {
    .container {
        display: none;
    }
    .background-image{
      height: 18.75rem;
    }
    .wave{
      margin-bottom: -550px !important;
    }
}

post-list-thumb {
    display: flex
;
    width: 100%;
    height: 18.75rem;
    position: relative;
    margin: 1.25rem 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 20px -6px #00000080;
    opacity: 1;
    animation: main .6s;
    transition: box-shadow .3s ease;
}

@keyframes main {
  0% {
    opacity: 0;
    transform: translateY(50px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
.post-list-thumb {
    display: flex;
    width: 90%;
    height: 18.75rem;
    position: relative;
    margin: 1.25rem 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 20px -6px #00000080;
    opacity: 1;
    animation: main .6s;
    transition: box-shadow .3s ease;
    justify-self: center;
}

.post-content-wrap {
    position: relative;
    display: inline-block;
    padding-left: 0;
    width: 100%;
    padding: 0 1.875rem;
    margin-top: 1.25rem;
}
.post-date {
    color: #505050;
    font-size: .75rem;
    transition: background 1s;
}

.flex-child-center {
    display: inline-flex;
    align-items: center;
    gap: .375em;
}

a {
   
    text-decoration: none;
}

 .post-meta {
  
    font-size: .75rem;
}

.flex-child-center {
    display: inline-flex;
    align-items: center;
    gap: .375em;
}

.comments-number {
    margin: 0 .625rem;
}

.float-content {
    position: relative;
    width: 100%;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 9;
    color: #000000a8;
}

.float-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: 4.375rem;
    overflow: hidden;
   /*  text-align: left; */
    word-break: break-word;
}

.post-thumb {
    min-width: 55%;
}

.post-thumb a {
    height: 18.75rem;
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 0 10px 10px 0 ;
}

.post-list-thumb .post-thumb a img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    transition: all .6s;
}

.blur-up.lazyloaded {
    filter: blur(0);
}

.post-title h1:hover{
  color: orange;
}
</style>